<template>
  <div
    class="chat-item"
    :class="isMine ? 'chat-item-out': 'chat-item-in'"
  >
    <Avatar
      :src="parsedMsg.headImg || msg.avatar"
      class="chat-avatar"
    />
    <div class="chat-body">
      <div class="chat-user-name">
        {{ userNickName }}
      </div>
      <p class="chat-content">
        <template v-for="(item, index) in parsedDom">
          <span
            v-if="item.name === 'text'"
            :key="index"
            class="chat-content-txt"
          >{{ item.text }}</span>
          <img
            v-else-if="item.name === 'img'"
            :key="index"
            :src="item.src"
            width="20px"
            height="20px"
            class="chat-content-img"
          >
        </template>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { decodeText } from 'lib/chat.utils'
export default Vue.extend({
  components: {
    Avatar: () => import(/* webpackChunkName: "publicComp" */ 'components/Mine/Avatar.vue'),
  },
  props: {
    msg: {
      type: Object,
      default: () => {},
    },
  },
  data () {
    return {
      parsedMsg: typeof this.msg.payload.text === 'string'
        ? JSON.parse(this.msg.payload.text) : this.msg.payload.text,
    }
  },
  computed: {
    parsedDom (): any[] {
      return decodeText(this.parsedMsg.message)
    },
    isMine (): boolean {
      return this.msg.flow === 'out'
    },
    userNickName (): string {
      if (this.isMine || this.$store.state.userInfo.UserId !== '-1') {
        return this.parsedMsg.nickName || this.parsedMsg.forbidPhone
      }
      if (this.parsedMsg.nickName) {
        const [capacity, name] = this.parsedMsg.nickName.split('】')

        const hiddenName = (name || capacity).replace(/^(.)(.*)(.)$/,
          (sub: string, arg1: string, arg2: string, arg3: string) => {
            return `${arg1}*${arg2.length > 0 ? arg3 : ''}`
          })
        return `${name ? capacity + '】' : ''}${hiddenName}`
      }
      return this.parsedMsg.forbidPhone.replace(/^(\d{3})\d{4}/, '$1*')
    },
  },
})
</script>

<style lang="scss" scoped>
.chat-item {
  display: flex;
  margin: 20px 0;
  .chat-avatar {
    width: 54px;
    height: 54px;
  }
}
.chat-body {
  max-width: 85%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .top-most & {
    max-width: 100%;
    flex: 1;
  }
}
.chat-user-name {
  font-size: 24px;
  color: #666;
  line-height: 1;
  padding: 0 10px 10px;
}
.chat-content {
  position: relative;
  font-size: 28px;
  color: #000;
  line-height: 1.5;
  padding: 12px 28px;
  background: #fff;
  border-radius: 6px;
  .chat-item-in & {
    left: 14px;
  }
  .chat-item-out & {
    background: $primary-web;
    color: #fff;
    right: 14px;
  }
  .top-most & {
    padding-left: 0;
  }
  &::before {
    content: "";
    position: absolute;
    top: 18px;
    border-width: 14px;
    border-style: solid;
    width: 0;
    height: 0;
    border-color: transparent;
    .chat-item-in & {
      border-right-color: #fff;
      border-left-width: 0;
      left: -14px;
    }
    .chat-item-out & {
      border-left-color: $primary-web;
      border-right-width: 0;
      right: -14px;
    }
  }
}
.chat-item-out {
  flex-direction: row-reverse;
  .chat-body {
    align-items: flex-end;
  }
}
</style>
